<template>
  <view class="recently_songs">
    <view class="song_container">
      <text class="iconfont icon-bofangqi-bofangshu"></text>
      <text style="transform: translateX(-200rpx); line-height:70rpx; font-size:30rpx">播放全部</text>
      <text class="iconfont icon-xuanze-" style="font-size: 70rpx;"></text>
    </view>
    <view class="scroll_container">
      <view v-for="item in recently" :key="item.resourceId" class="recommend_container" @click="navTosongsDetail(item.data.id)">
        <image :src="item.data.al.picUrl" mode="widthFix"></image>
        <view class="text">
          <text>{{ item.data.name }}</text>
          <text class="wyf">{{ item.data.ar[0].name + ' -' + item.data.al.name }}</text>
        </view>
        <text class="iconfont icon-gengduo-shuxiang"></text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      recently: []
    }
  },
  computed: {
    // 以下两种方式都可以
    // ...mapState({ token: state => state.login.token })
    ...mapState('login', ['cookie'])
  },
  onLoad() {
    this.getRecentlySongs(this.cookie)
  },
  methods: {
    async getRecentlySongs(cookie) {
      const { data: res } = await uni.$http.get('record/recent/song', { cookie })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('最近播放歌曲列表获取失败')
      this.recently = res.data.list
    },
    navTosongsDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_detail/songs_detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.song_container {
  display: flex;
  justify-content: space-between;
  // margin-top: 140rpx;
  height: 80rpx;
  position: relative;
  overflow: hidden;
}
.iconfont {
  margin: 0 10rpx;
  width: 80rpx;
  height: 80rpx;
}
.icon-bofangqi-bofangshu {
  font-size: 70rpx;
}

.recommend_container {
  position: relative;
  display: flex;
  margin: 15rpx 0 15rpx 20rpx;
}
.recommend_container image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}
.text {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  // justify-content: flex-start;
  // align-items: flex-start;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.text .wyf {
  color: #808080;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 15rpx;
  max-width: 400rpx;
}
.scroll_container {
  height: calc(100vh - 380rpx);
}
.icon-gengduo-shuxiang {
  position: absolute;
  right: 0;
  margin: 0 -20rpx;
  line-height: 100rpx;
  height: 100rpx;
}
</style>
